<template>
	<el-form size="medium" ref="tableForm" :model="tableForm" class="custom_select_wrapper">
		<el-table :data="tableForm.lists" size="medium" border>
			<el-table-column label="变更时间" min-width="180">
				<template slot-scope="{ row, $index }">
					<el-form-item :prop="`lists.${$index}.changeTime`" :rules="tableRules.changeTime">
						<el-date-picker v-model="row.changeTime" type="date" placeholder="选择变更时间"></el-date-picker>
					</el-form-item>
				</template>
			</el-table-column>
			<el-table-column label="变更理由" min-width="300">
				<template slot-scope="{ row, $index }">
					<el-form-item :prop="`lists.${$index}.reason`" :rules="tableRules.reason">
						<el-input v-model="row.reason" placeholder="输入变更理由"></el-input>
					</el-form-item>
				</template>
			</el-table-column>
			<el-table-column label="变更情况" min-width="300">
				<template slot-scope="{ row, $index }">
					<el-form-item :prop="`lists.${$index}.cause`" :rules="tableRules.cause">
						<el-input v-model="row.cause" placeholder="输入变更情况"></el-input>
					</el-form-item>
				</template>
			</el-table-column>
			<el-table-column label="是否需要变更审批" min-width="150">
				<template slot-scope="{ row, $index }">
					<el-form-item :prop="`lists.${$index}.isAudit`" :rules="tableRules.isAudit">
						<el-radio-group v-model="row.isAudit" :aria-hidden="false">
							<el-radio label="1">是</el-radio>
							<el-radio label="2">否</el-radio>
						</el-radio-group>
					</el-form-item>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="54" align="center">
				<template slot-scope="{ row, $index }">
					<el-button class="del" type="text" size="small" icon="el-icon-delete" @click="handleDeleteUser($index)"></el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-button type="primary" size="small" class="add" @click="handleAddedUser()">新增一位</el-button>
	</el-form>
</template>

<script>
import emitter from 'element-ui/src/mixins/emitter';
export default {
	mixins: [emitter],
	props: {
		value: { type: Array, default: () => [] },
		list: { type: Array, default: () => [] }
	},
	data() {
		return {
			tableForm: {
				lists: this.value
			},
			tableRules: {
				changeTime: [{ required: true, message: '请选择变更时间', trigger: 'change' }],
				reason: [{ required: true, message: '请输入变更理由', trigger: 'blur' }],
				cause: [{ required: true, message: '请输入变更情况', trigger: 'blur' }],
				isAudit: [{ required: true, message: '请选择是否需要变更审核', trigger: 'change' }]
			}
		};
	},
	watch: {
		value(arr) {
			this.$set(this.tableForm, 'lists', arr);
		},
		'tableForm.lists'(arr) {
			this.$emit('input', arr);
			this.dispatch('ElFormItem', 'el.form.change', [arr]);
		}
	},
	methods: {
		async handleAddedUser() {
			if (!(await this.validChildForm())) return false;
			this.tableForm.lists.push({ changeTime: '', reason: '', cause: '', isAudit: '' });
		},

		handleDeleteUser(index) {
			this.tableForm.lists.splice(index, 1);
		},

		validChildForm() {
			return new Promise((resolve) => {
				this.$refs['tableForm'].validate((valid) => {
					resolve(valid);
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.custom_select_wrapper::v-deep {
	width: 100%;
	.el-button.del {
		font-size: 16px;
	}
	.el-button.add {
		margin-top: 10px;
	}
}
</style>
